<!DOCTYPE html>
<html>
  <head>
    <style>
      div.sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 5px;
        background-color: #cae8ca;
        border: 2px solid #4caf50;
      }
    </style>
  </head>
  <body>
    <p>请试着在这个框架内<b>滚动</b>页面，以理解粘性定位的原理。</p>
    <div class="sticky">我是有粘性的！</div>
    <div style="padding-bottom: 2000px">
      <p>
        在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。
      </p>
      <p>向上滚动以消除粘性。</p>
    </div>
  </body>
</html>
